<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>功能实现</title>
        <script src="js/jquery-1.11.1.js"></script>
        <!-- JQuery操作动画
            show()          功能：显示效果 本质：display:block
            hide()          功能：隐藏效果 本质：display:none
            
            slideDown()     功能：向下(滑动式)效果
            slideDown()     功能：向上(滑动式)效果
            
            fadeIn(毫秒数)   功能：淡入  本质：显示+透明度：0~1
            fadeOut(毫秒数)  功能：淡出  本质：隐藏+透明度：1~0
         -->
        <style>
            div{
                width: 500px;
                height: 500px;
                background: #ff0;
                display: none;
            }
        </style>
    </head>
    <body>
        <button id="show">显示按钮</button>
        <button id="hide">隐藏按钮</button>
        <button id="sd">滑动式向下按钮</button>
        <button id="su">滑动式向上隐藏按钮</button>
        <button id="fi">淡入按钮</button>
        <button id="fo">淡出按钮</button>
        <div></div>
        <script>
            // <!-- JQ 动画：显示与隐藏 -->
            $("#fo").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").fadeOut(600);
            })
            $("#fi").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").fadeIn(600);
            })
            $("#su").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").slideUp();
            })
            $("#sd").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").slideDown();
            })
            $("#show").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").show();
            })
            $("#hide").click(function(){
                // 隐藏css属性 直接给元素设置
                $("div").hide();
            })
            
            
            // $("button").click(function(){
            //     // 隐藏   css属性直接给元素设置
            //     $("div").css("display","none").css("border-radius","50%")css("background","#f00");
            // });
        </script>
    </body>
</html>